<template>
  <div class="top-category">
    <div class="container">
      <!-- 面包屑 -->
      <sy-bread>
        <sy-bread-item to="/">首页</sy-bread-item>
        <transition name="fade">
          <sy-bread-item :key="subList.id">{{subList.name}}</sy-bread-item>
        </transition>
      </sy-bread>

      <!-- 轮播图 -->
      <sy-Carousel :silders="silders"></sy-Carousel>

      <!-- 二级分类 -->
      <div class="sub-list">
        <!-- 全部分类 -->
        <h2>全部分类</h2>
        <ul>
          <li v-for="item in subList.children" :key="item.id">
            <router-link :to="`/category/sub/${item.id}`">
              <img :src="item.picture" alt="">
              <p>{{item.name}}</p>
            </router-link>
          </li>
        </ul>
      </div>

      <!-- 分类关联商品 -->
      <div class="ref-goods" v-for="item in subList.children" :key="item.id">
        <div class="head">
          <h3>{{item.name}}</h3>
          <p class="tag">温暖柔软，品质之选</p>
          <sy-more class="sy-more"></sy-more>
        </div>
        <div class="goods-body" >
          <GoodItem v-for="good in item.goods" :cateGoods="good" :key="good.id"/>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import { ref, watch } from 'vue'
import { getBannerAPI } from '@/api/home'
import { useRoute } from 'vue-router'
import GoodItem from '@/components/category/GoodItem.vue'
import { getCategoryAPI } from '@/api/category'
export default {
  name: 'TopCategory',
  components: { GoodItem },
  setup () {
    const silders = ref([])
    // ============轮播图===================
    getBannerAPI().then(data => {
      silders.value = data.result
      // console.log(data.result)
    })

    // ==============推荐商品================
    const route = useRoute()
    const subList = ref([])
    const getSubList = () => {
      getCategoryAPI(route.params.id).then(data => {
        console.log(data)
        subList.value = data.result
        console.log(subList.value)
      })
    }
    // 监听路由发生变化时发起请求获取二级分类的推荐数据
    watch(() => route.params.id, newValue => {
      if (newValue && route.path === `/category/${newValue}`) { getSubList() }
      console.log(route.path)
    }, {
      immediate: true
    })

    return { silders, subList }
  }
}
</script>

<style lang="less">
// 面包屑导航的动画效果
.fade-enter-to,
.fade-leave-from{
  opacity: 1;
  transform: none;
}
.fade-enter-active,
.fade-leave-active{
  transition: all 0.5s;
}
.fade-enter-from,
.fade-leave-to{
  opacity: 0;
  transform: translate3d(20px,0,0);
}
.sy-bread-item{
  margin-right: 5px;
}
.top-category{
  height: 100%;
}
.sub-list{
  background-color: #fff;
  padding: 10px 0;
  margin-top: 25px;
  h2{
    text-align: center;
    color: #666;
    font-size: 28px;
    font-weight: normal;
  }
  ul{
    display: flex;
    flex-wrap: wrap;
    padding:0 32px;
    li {
     width: 168px;
     height: 160px;
    a{
      display: block;
      text-align: center;
      color: #333;
      font-size: 16px;
      img{
        width: 100px;
        height: 100px;
      }
      p{
        line-height: 40px;
      }
      &:hover{
      color:@themeColor;
    }
    }
    }
  }
}
.ref-goods{
  background-color: #fff;
  margin-top: 20px;
  position: relative;
  .head{
    text-align: center;
    padding: 20px 0;
    h3{
      font-size: 30px;
      font-weight: normal;
      color: #666;
      margin: 5px;
    }
    .tag{
      font-size: 20px;
      color: #999;
    }
    .sy-more{
      position: absolute;
      top: 20px;
      right: 20px;
    }
  }
  .goods-body{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: 0 65px 30px;
  }
}
</style>
